/*----------------------------------------*\
  DESKTOP-MENU
\*----------------------------------------*/

.desktop-menu {
  @apply border-b relative z-40;
}

.desktop-menu__drawer {
  display: none;
  @apply lg:block;
  @apply mt-0;
  @apply w-[450px] p-8 pt-16 left-0;
  @apply xl:w-[650px] xl:p-12 xl:pt-20;
  @apply 3xl:w-[850px] 3xl:p-24;
  @apply overflow-hidden;
  @apply absolute z-30 top-14 xl:top-16 3xl:top-20;
  @apply bg-white shadow-2xl opacity-100;
  transition: opacity 300ms ease-in-out, height 200ms ease-in-out;

  & > * {
    @apply transition-transform translate-y-0 duration-300;
  }

  &.hidden {
    display: block !important;
    height: 0 !important;
    @apply overflow-hidden p-0 opacity-0;
    transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms;

    & > * {
      @apply transition-transform -translate-y-8 duration-300;
    }
  }

  &.with-offset {
    @apply -left-4 xl:-left-8 3xl:-left-20;
  }
}

.desktop-menu__overlay {
  display: none;
  @apply lg:block h-[120vh];
  @apply absolute z-20 top-14 xl:top-16 3xl:top-20 right-0 bottom-0 left-0;
  @apply bg-gradient-to-b from-text-900/20 via-text-900/20 to-transparent;
  @apply transition-opacity duration-300;

  &.hidden {
    display: block !important;
    height: 0 !important;
    @apply overflow-hidden p-0 opacity-0;
    transition: opacity 300ms, height 1ms 300ms;
  }
}

.desktop-menu__close {
  @apply hidden lg:block;
  @apply menu__action-btn;

  @apply lg:absolute;
  @apply lg:top-4 lg:right-0;
  @apply xl:top-6 xl:right-4;
  @apply 3xl:top-8 3xl:right-20;

  & .icon {
    @apply lg:h-5 lg:w-5;
  }
}
